<template>
  <div class="map">
    <div class="mapSearch">
      <el-input placeholder="请输入你要查找的关键词" v-model="userInput" id="tishikuang"
                style="width: 300px;margin-left: 25px;margin-right: 10px;margin-bottom: 10px"></el-input>
      <el-button type="primary" @click="biu">确定选址</el-button>
    </div>
    <div id="container">
    </div>
  </div>

</template>


<script>

import AMapLoader from '@amap/amap-jsapi-loader'

window._AMapSecurityConfig = {
  securityJsCode: '3f137c1c6c2083354d20a126f0e69a2c' //填写你的安全密钥
}

export default {
  // apiKey（必需）：高德地图的API Key
  // center（可选）：地图中心点的经纬度坐标。默认值为[116.397428, 39.90923]（北京市中心）
  // zoom（可选）：地图的缩放级别。默认值为13
  name: 'Map',
  data() {
    return {
      map: null,
      autoOptions: {
        input: 'tishikuang' //绑定的搜索关键字的input标签ID，用这个注册
      },
      auto: null,
      userInput: '',
      mouseTool: null,
      overlays: [],
      placeSearch: null,
      searchHere: null,
    };
  },
  methods: {
    // poi搜索以后 点击确认选址以后的操作
    biu() {
      if (this.searchHere) {
        this.$message({
          message: '确认地点：' + this.searchHere.name,
          type: 'success'
        });
        // this.$emit('mapHere',this.searchHere);

        alert(`地址数据都在data里面this.searchHere，包括经纬度，以及其他各种地址信息，该有的都有，当poi搜索以后select(e){}方法里面的参数e就是地址信息，我把单独拿出来。地点名：` + this.searchHere.name)
      }
    },

    //初始化地图
    initMap() {
      let load = AMapLoader.load({
        key: "98ea92fa28c56fcc52055f453f871349", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Marker", "AMap.Geolocation", "AMap.HawkEye", "AMap.MapType",
          'AMap.AutoComplete', 'AMap.PlaceSearch'],
        mapStyle: 'amap://styles/228089dd9dca2547a543f5469d306575',
      }).then((AMap) => {
        this.map = new AMap.Map("container", {  //设置地图容器id
          viewMode: "2D",    //是否为3D地图模式
          zoom: 15,           //初始化地图级别
          center: [121.569447, 31.098054], //初始化地图中心点位置
          resizeEnable: true,
          mapStyle: 'amap://styles/228089dd9dca2547a543f5469d306575',
        })

        //在地图上显示工具条方法
        this.map.addControl(new AMap.ToolBar({ //toolBar
          //这里可以添加自己想要的参数  ，上面有官方文档的链接
          position: 'LT', // 默认位置：LT:左上角;
          autoPosition: true, //是否自动定位  默认为false
          locate: false, //是否显示定位按钮，默认为 true
        })) // 工具条
        this.map.addControl(new AMap.Scale())
        this.map.addControl(new AMap.HawkEye()) // 鹰眼
        this.map.addControl(new AMap.MapType()) // 图层切换

        this.geolocation = new AMap.Geolocation({ //定位
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          convert: true, //自动偏移坐标 为高德坐标，默认：true
          timeout: 5000, //超过5秒后停止定位，默认：无穷大
          position: 'LB', //定位按钮停靠位置
          offset: [20, 80],
          showMarker: true, //定位成功在位置显示点标记，默认：true
        })
        this.map.addControl(this.geolocation); //在地图上引入定位插件
        this.geolocation.getCityInfo();  //定位到城市

        this.auto = new AMap.AutoComplete(this.autoOptions)

        //1.创建Marker对象
        let marker = new window.AMap.Marker({
          position: [121.569447, 31.098054],//要展示marker的经度、纬度。数据格式就是数组里放入经纬度数据
          // icon: require("../../../public/img/bg/site.png"), //显示的图标
          // offset: [-16, -32],//图标偏移量，展示时会默认以图标的左上角为原点，不设置偏移量会导致地图放大缩小时造成图标偏移的情况，偏移量设置为图标宽度的负一半，负整个高度。
        });

        this.map.add(marker); //添加marker

        this.placeSearch = new AMap.PlaceSearch({
          map: this.map
        }) //构造地点查询类
        this.auto.on('select', this.select)//绑定查询事件

        //定位的方法 获取用户当前的精确位置信息
        this.geolocation.getCurrentPosition((status, result) => {
          console.log('定位getCurrentPosition', status, result);
          if (status == 'complete') {
            console.log('定位信息', result);
          } else {
            console.log('定位出错', result);
          }
        });

      }).catch(e => {
        console.log(e);
      })
    },

    //poi搜索 这里面的这个参数 e 就是搜索以后的地址信息 你可以把它打印出来看一看经纬度什么的都有
    select(e) {
      this.placeSearch.setCity(e.poi.adcode) //依据城市ID搜索
      this.placeSearch.search(e.poi.name) //关键字查询查询
      this.map.setZoom(10, true)
      this.searchHere = e.poi
      this.$message({
        message: '选择地点:' + this.searchHere.name,
        type: 'success'
      });
    }
  },
  mounted() {
    // DOM初始化完成进行地图初始化
    this.initMap()
  },
}
</script>

<style scoped>

#container {
  width: 100%;
  height: 100%;
}

.mapSearch {
  float: left;
}

</style>